/* Main */
/* https://juliamono.netlify.app/ */
@font-face {
	font-family: 'julia-mono';
	src: url('../assets/fonts/JuliaMono-RegularLatin.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	}

/* Headers */
/* From Font Squirrel, free use assumed */
@font-face {
	font-family: 'underwood_championregular';
	src: url('../assets/fonts/uwch-webfont.woff2') format('woff2'),
		url('../assets/fonts/uwch-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}

:root {
	--col_page_background: #E4FABD;
	
	--col_box_background: #BEEF69;
	--col_box_border: #8ACA1D;
	--col_box_shadow: #161616;
	
	--col_text: #161616;
	
	--col_links: #161616;
	--col_links_hover: #18A731;
	
	--col_show: #F8FD6F;
	--col_show_border: #D2D91F;
	
	--col_date: #CFF58F;
	--col_date_border: #F8FD6F;
}

@media (prefers-color-scheme: dark) {
	:root {
		--col_page_background: #1B230A;
		
		--col_box_background: #292E1F;
		--col_box_border: #161616;
		--col_box_shadow: #161616;
		
		--col_text: snow;
		
		--col_links: snow;
		--col_links_hover: #beef69;
		
		--col_show: #232A14;
		--col_show_border: #161616;
		
		--col_date: #232A14;
		--col_date_border: #F8FD6F;
		}

	} /* /prefers dark */


body {
	padding: 1em;
	
	background-color: var(--col_page_background);
	
	font-size: 1rem; 
	font-family: 'julia-mono', monospace;
	color: var(--col_text);

	}

a {
    color: var(--col_links);
    text-decoration: underline dotted;
}
a:hover {
    color: var(--col_links_hover);
    }


nav ul li {
	display: inline-block;
	list-style-type: none;
	margin: 0.25em;
	text-wrap: balance;
	}


h1, h2, h3, h4, h5, h6 {
	font-family: 'underwood_championregular', monospace;
	}

h2 { margin-top: 2em; }
h3 { margin-top: 1.6em; }
	
.flowerbed {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	gap: 1em;
}

nav, .hedge, .flowerbed div {
	padding: 1em;
	background-color: var(--col_box_background);
	border: 8px solid var(--col_box_border);
	box-shadow: 6px 6px var(--col_box_shadow);
}

.hedge {
	margin: 1em 0 0 0;
	}

.flowerbed div {
	flex: 1;
	min-width: 16em;
}

.flower, nav ul li {
	background-color: var(--col_show);
	padding: 0.2em;
	border: 2px solid var(--col_show_border);
	
	font-size: 1.6em;
	}

.check, .stem {
	display: inline;
	background-color: var(--col_date);
	padding: 0.2em;
	
	font-size: 0.9em;
	}
.check::before {
	content: "URL last checked on: ";
	}